<template>
  <view>
    <!-- 评分 -->
    <view class="score-show">
      <view class="food-score">
        美食评分
        <text class="sup">TM</text>
      </view>

      <view class="score-content">
        <view class="score-left">
          <view class="score-num">{{ foodObj.foodScore }}</view>
          <!-- 当前评分 -->
          <u-rate
            :count="starCount"
            v-model="foodObj.foodScore"
            :disabled="true"
            active-color="#ffac2b"
            size="24"
          ></u-rate>
        </view>

        <view class="score-right">
          <view class="score-stars">
            <!-- 评分 -->
            <u-rate
              :count="1"
              current="1"
              :disabled="true"
              active-color="#bfbfbf"
              size="20"
            ></u-rate>
            <!-- 评分 -->
            <u-rate
              :count="2"
              current="2"
              :disabled="true"
              active-color="#bfbfbf"
              size="20"
            ></u-rate>
            <!-- 评分 -->
            <u-rate
              :count="3"
              current="3"
              :disabled="true"
              active-color="#bfbfbf"
              size="20"
            ></u-rate>
            <!-- 评分 -->
            <u-rate
              :count="4"
              current="4"
              :disabled="true"
              active-color="#bfbfbf"
              size="20"
            ></u-rate>
            <!-- 评分 -->
            <u-rate
              :count="5"
              current="5"
              :disabled="true"
              active-color="#bfbfbf"
              :size="20"
            ></u-rate>
          </view>
          <view class="score-lines">
            <u-line-progress
              active-color="#fdab2d"
              :height="10"
              :show-percent="false"
              :percent="70"
            ></u-line-progress>
            <u-line-progress
              active-color="#fdab2d"
              :height="10"
              :show-percent="false"
              :percent="8"
            ></u-line-progress>
            <u-line-progress
              active-color="#fdab2d"
              :height="10"
              :show-percent="false"
              :percent="10"
            ></u-line-progress>
            <u-line-progress
              active-color="#fdab2d"
              :height="10"
              :show-percent="false"
              :percent="10"
            ></u-line-progress>
            <u-line-progress
              active-color="#fdab2d"
              :height="10"
              :show-percent="false"
              :percent="1"
            ></u-line-progress>
          </view>
        </view>
      </view>
    </view>
    <!-- 评论区 -->
    <view>
      <view class="comment-title">评论</view>
      <view class="comment" v-for="cobj in commentObj" :key="cobj.commentId">
        <u-avatar :src="cobj.userAvatar+`?t=${new Date().getTime()}`" class="u-skeleton-rect"></u-avatar>
        <text class="userName u-skeleton-rect">{{ cobj.userName }}</text>
        <text class="commentTime u-skeleton-rect">{{ cobj.commentTime }}</text>
        <view class="commentText u-skeleton-rect">
          <!--  show-height="200" close-text="展开评论" -->
          <u-read-more :toggle="true">
            <rich-text :nodes="cobj.commentContent"></rich-text>
          </u-read-more>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// const hostname = "http://175.178.217.113:8080"; // 设置主机名
// const hostname = "http://localhost:8080"; // 设置主机名
// const urlImg = "http://175.178.217.113:9000"; // 设置图片的路径
export default {
  data() {
    return {
      content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
      foodObj: {},
      commentObj: [],
      // 用户默认头像
      userAvatarSrc: "/static/images/avatar.jpg", // 引入src需要使用绝对路径
      FoodImg: "/static/images/d4953d75-964f-48b0-b17a-d95d90829e63.jpg",
      starCount: 5,
      starValue: 4,
      shadowStyle: {
        backgroundImage: "none",
        paddingTop: "300rpx",
        marginTop: "-300rpx",
      },
      loading: false, // 是否显示骨架屏组件
    };
  },
  methods: {
    // 给详情页发送请求获取对应的数据
    getDetail(foodId) {
      const {
        comment: { userId },
        hostname,
        urlImg,
      } = this.$store.state.moduleCommon;
      console.log("foodId", foodId);
      uni.request({
        url: `${hostname}/api/food/detailed/${foodId}`,
        success: (res) => {
          this.foodObj = res.data.data;
          this.foodObj.foodImage1 = `${urlImg}/${this.foodObj.foodImage1}`;
          this.foodObj.foodImage2 = `${urlImg}/${this.foodObj.foodImage2}`;
          this.foodObj.foodImage3 = `${urlImg}/${this.foodObj.foodImage3}`;
          this.commentObj = this.foodObj.comments;
          console.log("this.foodObj", this.foodObj);
          console.log("commentObj", this.commentObj);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
  },
  onShow() {
    this.getDetail(this.foodObj.foodId);
  },
  onLoad(e) {
    this.foodObj.foodId = e.foodId;
  },
};
</script>

<style lang="scss" scoped>
// 展示所有的评论
.all-comment-cell {
  height: 30rpx;
  margin-bottom: -10rpx;
  margin-top: 30rpx;
}

// 评论标题
.comment-title {
  font-size: 20px;
  font-weight: bold;
  margin-right: 20rpx;
  margin-left: 20rpx;
}

// 评论模板
.comment {
  margin-top: 10rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
  border-radius: 20rpx;
  border: 1rpx solid #ccc;
  padding: 0 20rpx;
  position: relative;
  .userName {
    position: absolute;
    top: 10rpx;
    left: 130rpx;
  }
  .commentTime {
    position: absolute;
    top: 50rpx;
    left: 130rpx;
    color: #7c7373;
  }
}
// 评分板块
.score-show {
  margin: 20rpx;
  height: 250rpx;
  border-radius: 20rpx;
  border: 1rpx solid #ccc;
  position: relative;
  .sup {
    font-size: 8px;
    position: absolute;
    top: -7rpx;
  }
  .score-content {
    height: 170rpx;
    width: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
    .score-left {
      width: 30%;
      text-align: center;
      .score-num {
        margin-top: 20rpx;
        font-size: 30px;
        font-weight: bold;
      }
    }
    .score-right {
      // border: 1rpx solid #ccc;
      position: absolute;
      top: 12px;
      left: 30%;
      height: 160rpx;
      .score-stars {
        width: 160rpx;
        height: 130rpx;
        // border: 1rpx solid #670b0b;
        // ::v-deep /deep/ 穿透
        ::v-deep .u-rate {
          // 穿透
          // border: 1rpx solid #5792e9;
          font-size: 0px;
          flex-direction: column;
        }
      }
      .score-lines {
        // border: 1rpx solid #16d669;
        // background: lightblue;
        top: 0;
        left: 160rpx;
        width: 100px;
        position: absolute;
        ::v-deep .u-progress {
          display: block;
          margin-top: 15rpx;
        }
      }
    }
  }
}
</style>
